<template>
  <div class="search-section" style="position: relative">
    <div class="bgFFF color000 mb12 bdradius4">
      <div style="position: relative">
        <div class="color000">
          <!-- <Card dis-hover class="criteria"> -->
          <div ref="cardSearchBox" class="example-code ivu-col boxhh">
            <!-- <Form
                :model="pageData"
                :label-width="66"
                label-position="left"
                inline
              > -->
            <!-- <Row class="search-input"> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}"> -->
            <!-- <FormItem label="居民姓名"> -->
            <div class="boxhh-div" style="height: 29px;width:12%">
              <span>居民姓名</span>
              <Input
                type="text"
                v-model="pageData.name"
                clearable
                @on-clear="onSearch"
                placeholder="请输入居民姓名"
                style="flex: 1"
              />
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}"> -->
            <!-- <FormItem label="联系方式"> -->
            <div class="boxhh-div" style="width:12%">
              <span>联系方式</span>
              <Input
                type="text"
                v-model="pageData.phone"
                clearable
                @on-clear="onSearch"
                placeholder="请输入联系方式"
                style="flex: 1"
              />
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}"> -->
            <!-- <FormItem label="身份证号"> -->
            <div class="boxhh-div" style="width:14%">
              <span>身份证号</span>
              <Input
                type="text"
                v-model="pageData.idCard"
                clearable
                maxlength="18"
                @on-clear="onSearch"
                placeholder="请输入身份证号"
                style="flex: 1"
              />
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}" v-if="$route.name === 'juMinLieBiao'"> -->
            <!-- <FormItem label="添加时间"> -->
            <div class="boxhh-div" v-if="$route.name === 'juMinLieBiao'" style="width:16%">
              <span>添加时间</span>
              <DatePicker
                v-model="pickDate"
                type="daterange"
                clearable
                split-panels
                placeholder="请选择添加时间"
                format="yyyy-MM-dd"
                @on-change="handleDaterangeInput"
                :transfer="true"
                :editable="false"
                style="flex:1"
              ></DatePicker>
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}" v-if="$route.name === 'zengYuanLieBiao'"> -->
            <!-- <FormItem label="增员年份"> -->
            <div class="boxhh-div" v-if="$route.name === 'zengYuanLieBiao'" style="width:13%">
              <span>增员年份</span>
              <DatePicker
                ref="datePicker"
                v-model="pickDate2"
                type="year"
                clearable
                placeholder="请选择增员年份"
                format="yyyy"
                @on-change="handleDaterangeInput1"
                :transfer="true"
                :editable="false"
                style="flex: 1"
              ></DatePicker>
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}" v-if="$route.name === 'jianYuanLieBiao'"> -->
            <!-- <FormItem label="减员年份"> -->
            <div class="boxhh-div" v-if="$route.name === 'jianYuanLieBiao'" style="width:13%">
              <span>减员年份</span>
              <DatePicker
                ref="datePicker"
                v-model="pickDate2"
                type="year"
                clearable
                placeholder="请选择减员年份"
                format="yyyy"
                @on-change="handleDaterangeInput1"
                :transfer="true"
                :editable="false"
                style="flex: 1"
              ></DatePicker>
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}" v-if="$route.name === 'xiangShouZhengCe'"> -->
            <!-- <FormItem label="享受年份"> -->
            <div class="boxhh-div" v-if="$route.name === 'xiangShouZhengCe'" style="width:13%">
              <span>享受年份</span>
              <DatePicker
                ref="datePicker"
                v-model="pickDate2"
                type="year"
                clearable
                placeholder="请选择享受年份"
                format="yyyy"
                @on-change="handleDaterangeInput1"
                :transfer="true"
                :editable="false"
                style="flex: 1"
              ></DatePicker>
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="6" :xl="{span:'14-2'}" v-if="$route.name !== 'zengYuanLieBiao'"> -->
            <!-- <FormItem label="标签"> -->
            <div class="boxhh-div" v-if="$route.name !== 'zengYuanLieBiao'" style="height: 29px;width:13%">
              <span>标签</span>
              <Select
                style="flex:1"
                v-model="pageData.tagIdList"
                multiple
                transfer
                placeholder="请选择标签"
                :max-tag-count="2"
                :max-tag-placeholder="maxTagPlaceholder"
              >
                <OptionGroup
                  :label="item.tagName"
                  v-for="item in tagList"
                  :key="item.id"
                >
                  <Option
                    v-for="itemC in item.children"
                    :value="itemC.id"
                    :key="itemC.id"
                    >{{ itemC.tagName }}
                  </Option>
                </OptionGroup>
              </Select>
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="4" :xl="{span:'14-2'}"> -->
            <!-- <FormItem label="来源"> -->
            <div class="boxhh-div" style="width:13%">
              <span>来源</span>
              <Select
                v-model="pageData.source"
                clearable
                @on-clear="onSearch"
                :transfer="true"
                placeholder="请选择来源"
                style="flex:1"
              >
                <Option
                  v-for="item in sourceList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </div>
            <!-- </FormItem> -->
            <!-- </Col> -->
            <!-- <Col :xs="12" :sm="10" :md="8" :lg="4" :xl="{span:'14-2'}"> -->
            <div class="boxhh-div">
              <Button
                class="mr20"
                icon="ios-search"
                type="primary"
                @click="onSearch()"
                >搜索
              </Button>
              <Button @click="onReset()">重置</Button>
            </div>
            <!-- </Col> -->
            <!-- </Row> -->
            <!-- </Form> -->
          </div>
          <!-- </Card> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    tagList: {
      type: Array,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      pickDate: [],
      pickDate2: "",
      pageData: {
        total: "",
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      },
      // 1-主动添加 2-批量导入3-缴费补充
      sourceList: [
        {
          id: 1,
          name: "主动添加",
        },
        {
          id: 2,
          name: "批量导入",
        } /*{
        id: 3,
        name: "缴费补充",
      },*/,
      ],
    };
  },
  computed: {
    styles() {
      let width = this.width || 100;
      return {
        width: width <= 100 ? `${width}%` : `${width}px`,
      };
    },
  },
  created() {
    this.$nextTick(() => {
      // 时间选择弹窗默认选中明年
      let date = new Date().getFullYear() + 1;
      if (this.$refs["datePicker"]) {
        this.$refs["datePicker"].focusedDate = new Date(Date.parse(date));
      }
    });
  },
  watch: {},
  methods: {
    //添加时间
    handleDaterangeInput(data) {
      this.pageData.startDate = data[0];
      this.pageData.endDate = data[1];
      if (this.pageData.startDate == "" && this.pageData.endDate == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    // 增援年份
    handleDaterangeInput1(data) {
      this.pageData.year = data;
      if (this.pageData.year == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    maxTagPlaceholder(num) {
      return "···";
    },
    onSearch() {
      this.pageData.page.current = 1;
      this.pageData.total = 0;
      this.$emit("onSearch", this.pageData);
    },
    onReset() {
      this.pageData = {
        total: "",
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      };
      this.pickDate = [];
      this.pickDate2 = "";
      this.$emit("onSearch", this.pageData);
    },
  },
};
</script>
<style lang="less" scoped>
.boxhh {
  display: flex;
  align-items: center;
  padding: 15px 0;
  .boxhh-div {
    margin-left: 20px;
    display: flex;
    align-items: center;
    span {
      white-space: nowrap;
      margin-right: 10px;
    }
  }
}
</style>
